Manon.icu

I'm here to make you a better developer by teaching you everything I know about building for the web.

Published 2022-05-07

Next.js - CSS Support

Next.js 允许使用 css-in-js 语法，并且支持 css-modules。比如styled-jsx、css-modules、styled-components等。

创建container.module.css

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
  border: 1px solid #ddd;
}

在component目录下创建container.jsx并引入container.module.css

import styles from './container.module.css'

function Container({children}) {
  return <div className={styles.container}>{children}</div>
}

export default Container

在first.js中引入container.jsx

import Link from 'next/link'
import Head from 'next/head'
import Container from '../../components/container'

export default function FirstPost() {
  return (
    <>
      <Container>
        <Head>
          <title>My First Post</title>
        </Head>
        <h1>My First Post</h1>
        <h2>
          <Link href="/">
            <a>Home</a>
          </Link>
        </h2>
      </Container>
    </>
  )
}

启动服务

npm run dev

g5xWwA

Comments

No Comments！